<template>
	<view class="news">
		<u-navbar :is-back="true" :border-bottom="false" back-icon-color="#444444">
			<view class="slot-wrap">
				<view class="nav_center single-omit">
					<text v-if="!showSearch">新闻资讯</text>
					<u-search v-else placeholder="请输入关键字" action-text="取消" @custom="showSearch=false">
					</u-search>
				</view>
			</view>
			<view class="navbar-right" slot="right">
				<u-icon name="search" size="30" color="#666666" @click="showSearch=false"></u-icon>
			</view>
		</u-navbar>

		<view class="list">
			<view class="my_tabs">
				<u-tabs 
				 :list="columnlist" 
				 :current="current" 
				 @change="change" 
				 active-color="#EB4D3C" 
				 inactive-color="#666666" 
				 height="70"
				 font-size="29" 
				 :active-item-style="activeStyle"
				 name="columnlName"
				 gutter="18"
				 >
				</u-tabs>
			</view>
			<u-line color="#E1E1E1" />
			<view class="listCon" v-if="items && items.length>0">
				<view v-for="(item,index) in items" :key="item.newsCode">
					<news-item v-if="item.type ==0" :item="item"></news-item>
					<news-big-item v-else :item="item"></news-big-item>
					<u-line color="#E1E1E1" v-if="index !=items.length-1" />
				</view>
				<u-loadmore :status="status" />
			</view>
			<view v-else class="no_data">
				<u-empty text="暂无新闻资讯" mode="news"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import uIcon from 'uview-ui/components/u-icon/u-icon.vue'
	import NewsItem from "@/components/NewsItem.vue"
	import NewsBigItem from "@/components/NewsBigItem.vue"
	export default {
		components: {
			uIcon,
			NewsItem,
			NewsBigItem
		},
		data() {
			return {
				columnlist: [{
						name: '全部'
					}, {
						name: '理论宣讲'
					}, {
						name: '教育服务'
					},
					{
						name: '文化服务'
					},
					{
						name: '科技服务'
					},
					{
						name: '体育新闻'
					}
				],
				current: 0,
				showSearch: false,
				items: [],
				status: 'loadmore',
				activeStyle: {
					color: 'black',
					fontSize: '45rpx'
				},
				queryObj: {
					cpage: 1,
					areaCode: "", //	区域编码（切换到的区域的编码）
					pageSize: 12,
					columnCode: "", //栏目
					newsName: ""
				}
			};
		},
		onLoad() {
			this.loadColumnList();
			this.loadData();
		},

		async onReachBottom() {
			
			this.queryObj.cpage = this.queryObj.cpage + 1;
			if (this.queryObj.cpage > this.totalPage && this.queryObj.cpage !=1) {
				this.status = "nomore"
				return;
			}
			await this.loadData();
		},
		async onPullDownRefresh() {
			this.queryObj.cpage = 1;
			this.items = [];
			await this.loadData();
			uni.stopPullDownRefresh();
		},
		methods: {
			
			/**
			 * 获取资讯列表
			 */
			async loadData() {
				this.queryObj.areaCode = this.store_areaInform.areaCode;
				this.status = "loading";
				const result = await this.$api.queryNewsList(this.queryObj);
				if (result.resultCode === '200' && result.data.data) {
				
					let {
						recordList,
						cpage,
						totalPage
					} = result.data.data;
					
					this.totalPage = totalPage;
					this.items = this.items.concat(recordList);
					this.queryObj.cpage = cpage;
					if (this.queryObj.cpage >= this.totalPage){
						this.status = "nomore"
					}
				}
			},
            /**
			 * 获取栏目列表
			 */
			async loadColumnList(){
				const result = await this.$api.queryColumnList(this.queryObj);
				if (result.resultCode === '200' && result.data.data){
					this.columnlist = result.data.data;
					const firstObj = {
						columnCode:"",
						columnlName:"全部"
					};
					this.columnlist.unshift(firstObj);
				}
			},
			/**
			 * @param {Object} index  下标
			 */
			async change(index) {
				this.current = index;
				// this.key = this.key + 1;
				this.queryObj.columnCode = this.columnlist[index].columnCode;
				this.queryObj.cpage = 1;
				this.items = [];
				await this.loadData();
				this.toTop();
			},
			/**
			 * 回到顶部
			 */
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/commom/styles/icons.css";

	.news {
		/deep/.u-slot-content {
			display: flex;
			justify-content: center;

			.slot-wrap {
				max-width: 600rpx;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 88rpx;
				color: #333333;
			}
		}

		.navbar-right {
			margin-right: 24rpx;
		}


		.list {
			position: relative;
			width: 100%;
			padding: 0 20rpx;
			background: #fff;

			.my_tabs {
				// padding: 9rpx 0;
				position: fixed;
				z-index: 2;
				left: 0;
				right: 0;
				border-bottom: 1rpx solid #E1E1E1;
			}

			.listCon {
				padding-top: 80rpx;

			}
		}

		.no_data {
			height: 80vh;
			display: flex;
			flex-direction: column;
		}
	}
</style>
